<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="box">
        123123
    </div>
</body>

<script>
    // var box = document.querySelector(".box")
    // // 常规浏览器(IE高版本  -> IE低版本无此方法)
    // box.addEventListener("click",function(){
    //     console.log(this);
    // })

    // // IE低版本 (常规浏览器(IE高版本) 没有此写法)
    // box.attachEvent("onclick",function(){
    //     console.log(this);
    // })


    // 兼容写法
    // function addEvent(ele, type, callback) {
    //     if (ele.addEventListener) {  // 常规浏览器(IE高版本)
    //         ele.addEventListener(type, callback);
    //     } else {
    //         // attachEvent 接收回调函数 this -> window
    //         ele.attachEvent("on" + type, function (e) {
    //             callback.call(ele, e);// 将回调函数的this指向ele
    //         })
    //     }
    // }


    // 闭包
    var addEventHandler = function () {
        if (window.addEventListener) {  // 常规浏览器(IE高版本)
            return function (ele, type, callback) {
                ele.addEventListener(type, callback);
            }
        } else if(window.attachEvent){
            return function (ele, type, callback) {
                // attachEvent 接收回调函数 this -> window
                ele.attachEvent("on" + type, function (e) {
                    callback.call(ele, e);// 将回调函数的this指向ele
                })
            }
        }
    }

    var addEvent = addEventHandler();




</script>

</html>